<template>
  <div id="numPieChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { getDifferentConut } from '@/api/activeFault'

const type = [
  { value: '0', name: '全新世' },
  { value: '1', name: '晚更新世' },
  { value: '2', name: '早中更新世' },
  { value: '3', name: '前第四纪' }
]


const series = []
const maxRadius = 90
const barWidth = 8
const barGap = 12
const showPercent = false
let option = {}
const barColor = [
  {
    "color1": "#0040C2"
  },
  {
    "color1": "#1F67F6"
  },
  {
    "color1": "#518AFF"
  },
  {
    "color1": "#8DB3FF"
  }
]

const createEcharts = (data) => {
  data.value.map((item, i) => {
    series.push({
      type: 'pie',
      clockWise: true, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
      center: ["75%", "50%"],
      label: {
        show: false
      },
      data: [{
        realValue: item.value,
        value: item.per,
        name: item.name,
        itemStyle: {
          color: barColor[i].color1
        }
      }, {
        value: 100 - item.per,
        name: '',
        itemStyle: {
          color: "#262F68",
        },
        tooltip: {
          show: false
        },
        hoverAnimation: false
      }]
    })
    series.push({
      name: 'blank',
      type: 'pie',
      silent: true,
      z: 0,
      clockWise: false, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
      center: ["75%", "50%"],
      label: {
        show: false
      },
      data: [{
        value: 10,
        itemStyle: {
          color: "#262F68"
        },
        tooltip: {
          show: false
        },
        hoverAnimation: false
      }]
    })
  })
  option = {
    tooltip: {
      show: true,
      trigger: "item",
      formatter: function (params) {
        const { marker, data: { name, realValue } } = params
        return marker + name + "：" + realValue
      }
    },
    legend: {
      show: true,
      left: '20px',
      top: 'middle',
      itemGap: 5,
      itemHeight: 10,
      textStyle: {
        color: "#fff",
        padding: [0, 4],
        rich: {
          title: {
            fontSize: 16,
            lineHeight: 16,
            color: '#fff'
          },
          value: {
            color: '#46FFFF',
            fontSize: 16,
            fontFimely: 'DIN Alternate',
            align: 'center',
            backgroundColor: { image: ('/src/assets/images/activeFault/num-border.png') },
            padding: [0, 0, 5, 0]
          },
        }
      },
      formatter: (name) => {
        var datas = data.value;
        let total = 0;
        datas.map(item => {
          total += (item.value - 0)
        })
        let valueIndex = datas.map(item => item.name).indexOf(name);
        let htmlValue = showPercent ? datas[valueIndex].value + "%" : datas[valueIndex].value
        return "{title|" + name + "}     {value|" + htmlValue + "}"
      },

    },
    series: series
  }
  let myChart = echarts.init(document.getElementById("numPieChart"))
  myChart && myChart.setOption(option)
}

const data = ref([])
const differentConut = () => {
  getDifferentConut().then(res => {
    // activityEraType   活动时代类型  0全新世  1晚更新世  2早中更新世  3前第四纪
    if(res.data&&res.data.length==0){
      data.value = [
        { value: 0, name: '全新世',per: 0 },
        { value: 0, name: '晚更新世',per: 0 },
        { value: 0, name: '早中更新世',per: 0 },
        { value: 0, name: '前第四纪',per: 0 }
      ]
    }else{
      data.value = res.data.map(item => {
        return {
          name: type.find(item1 => item.activityEraType == item1.value)?.name,
          value: item.activityEraNum,
          per: item.activityEraProportion
        }
      })
    }

    createEcharts(data)
  })
}
onMounted(() => {
  differentConut()
  window.addEventListener('resize', resize)
})
const resize = () => {
  let myChart = echarts.init(document.getElementById("numPieChart"));
  myChart.resize()
}
onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
})
</script>
<style scoped lang="scss">
#numPieChart {
  width: 450px;
  font-size: 14px;
  margin: 10px 0 10px;
  height: calc(100% - 70px);
  min-height: 125px;

  &>div {
    height: 100%;
  }
}
</style>